<template>
  <div>
    <el-main>
      <div class="form_title">菜单信息</div>
      <div class="form_content">
        <el-form
          ref="form"
          label-width="80px"
          :model="model"
          :rules="rules"
        >
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="上级菜单">
                <el-input v-model="model.parentName" disabled="disabled" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="名称" prop="name">
                <el-input v-model="model.name" placeholder="请输入名称" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="编码" prop="code">
                <el-input v-model="model.code" placeholder="请输入编码" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="路径" prop="path">
                <el-input v-model="model.path" placeholder="请输入路径" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="图标" prop="icon">
                <el-input placeholder="请输入图标" v-model="model.icon" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="排序" prop="sortIndex">
                <el-input-number v-model="model.sortIndex" :min="1" :max="1000" placeholder="请输入排序"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" :rows="5" v-model="model.remark" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-main>
    <el-footer>
      <el-button
        icon="el-icon-close"
        size="small"
        @click="$router.go(-1)"
      >取消</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-check"
        size="small"
        @click="handleSave"
      >保存</el-button
      >
    </el-footer>
  </div>
</template>

<script>
  import {insertMenu,updateMenu,viewMenu} from "@/api/tenant/menu";
  import {ApiError} from "@/utils/errors";

  export default {
    data() {
      return {
        isEdit: false,
        model: {
          parentName: null,
          parentId: null,
          name: null,
          code: null,
          path: null,
          icon: null,
          sortIndex: 1,
          remark: null
        },
        rules: {
          name: [{ required: true, message: "名称必须填写", trigger: "blur" }],
          code: [{ required: true, message: "编码必须填写", trigger: "blur" }],
          sortIndex: [{ required: true, message: "排序必须填写", trigger: "blur" }]
        }
      }
    },
    created() {
      const parentId = this.$route.query.parentId;
      if(parentId){
        this.get(parentId,true);
      }
      const id = this.$route.query.id;
      if(id){
        this.isEdit = true;
        this.get(id)
      }
    },
    methods: {
      get(id,isParent){
        const that = this;
        const params = {id:id};
        viewMenu(params).then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            if(isParent){
              that.model.parentId = res.data.data.id;
              that.model.parentName = res.data.data.name;
            }else{
              that.model.id = res.data.data.id;
              that.model.parentId = res.data.data.parentId;
              that.model.parentName = res.data.data.parentName;
              that.model.code = res.data.data.code;
              that.model.name = res.data.data.name;
              that.model.path = res.data.data.path;
              that.model.icon = res.data.data.icon;
              that.model.sortIndex = res.data.data.sortIndex;
              that.model.remark = res.data.data.remark;
            }
          }
        });
      },
      handleSave() {
        const that = this;
        this.$refs.form.validate(valid => {
          if (!valid) {
            return;
          }
          let saveModelFunction = insertMenu;
          if (that.isEdit) {
            saveModelFunction = updateMenu;
          }
          saveModelFunction(that.model).then(res => {
            if (res.status == 200) {
              if (!res.data.success) {
                return this.$message.error(ApiError.msg(res.data.message));
              }
              this.$message.success(this.isEdit ? "修改菜单成功" : "新增菜单成功");
              that.$router.go(-1);
            }
          });
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .form_title {
    padding-bottom: 20px;
    font-size: 16px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.85);
  }
  .form_content {
    padding-right: 16px;
  }
  .input_suffix {
    display: inline-block;
    padding: 0 6px;
  }
  .el-divider {
    margin: 6px 0 16px;
  }
  .add_new_batch {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    height: 45px;
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    color: #8c939d;
  }
  .batch_block {
    margin-top: 16px;
  }
  .batch_block:first-child {
    margin-top: 0;
  }
  @import "@/styles/full-form";
  @import "@/styles/common-table";
</style>
